<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_jsx语法规则</title>
    <style>
        .h1 {
            color: red;
            background: #bfa;
        }
    </style>

    <!-- 引入react核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
        const data = ['Angular', 'React', 'Vue']
        const title = '前端js框架列表'
        // 创建虚拟DOM
        const VDOM = (
            <div>
                <h2>{title}</h2>
                <ul>
                    {
                        data.map((v, i) => {
                            return <li key={i}>{v}</li>
                        })
                    }
                </ul>
            </div>
        )
        // 渲染虚拟DOM
        ReactDOM.render(VDOM, document.getElementById('main'))

        /* jsx语法规则
            1. 定义虚拟DOM不需要引号
            2. 用{}包裹JS表达式(!不是语句!)
            3. 用className替换class
            4. 内联样式用 style={{key: value}}
            5. 必须只有一个根标签
            6. 标签必须闭合
            7. 标签首字母
                (1). 若小写字母开头，则识别为html标签，没有则报错
                (2). 若大写字母开头，则识别为组件
        */

        console.log(typeof VDOM)
    </script>
</head>

<body>

    <div id="main"></div>

</body>

</html>